.
<template>
    <div class="time-line">
        <div class="time-line-mode" v-for="(item, i) in steps" :key="i">
            <span class="number" :class="{ active: i + 1 <= active }">
                {{ i + 1 }}
            </span>
            <span class="title" :class="{ active: i + 1 <= active }">
                {{ item.title }}
            </span>
            <b v-show="i != 4" :class="{ active: i + 1 <= active }"></b>
        </div>
    </div>
</template>

<script setup lang="ts">
/**
 * 采购产品信息
 */
import dayjs from 'dayjs'

defineProps({
    // 激活
    active: {
        type: Number,
        default: 1,
    },
    // 步骤
    steps: {
        type: Array,
        default: [
            { title: '订单提交', active: true },
            { title: '卖方报价', active: false },
            { title: '卖方出库', active: false },
            { title: '快递运输', active: false },
            { title: '收货确认', active: false },
        ]
    }
})


</script>
<style lang="scss" scoped>
.time-line {
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .time-line-mode {
        width: 20%;
        display: flex;
        align-items: center;

        .number {
            width: 24px;
            height: 24px;
            background-color: #e4e7ed;
            border-color: #e4e7ed;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 16px;
            color: #ffffff;

            &.active {
                background-color: #409eff;
                border-color: #409eff;
            }
        }

        .title {
            color: #909399;
            font-size: 14px;
            margin-right: 20px;

            &.active {
                color: #409eff;
            }
        }

        b {
            font-style: normal;
            border-top: 1px dashed #909399;
            flex: 0.8;
            height: 1px;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                top: -6.5px;
                right: -6px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 0 6px 6px;
                border-color: transparent transparent transparent #909399;
            }

            &.active {
                border-top: 1px dashed #409eff;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    top: -6.5px;
                    right: -6px;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 6px 0 6px 6px;
                    border-color: transparent transparent transparent #409eff;
                }
            }
        }
    }
}
</style>
